<template>
	<div class="container">
		<view class="system-height" :style="{height:statusBarHeight}"></view>
		<view class="content">
			<view class="asset-row">
				<view class="asset-item">
					<text class="label">TX通证</text>
					<text class="value">{{userInfo.token}}</text>
				</view>
				<view class="asset-item">
					<text class="label">乐豆</text>
					<text class="value">{{userInfo.beans}}</text>
				</view>
				<view class="asset-item">
					<text class="label">当前价格</text>
					<text class="value">{{userInfo.tokenRate}}</text>
				</view>
			</view>
		</view>
		<view class="statics">
			<view class="statics-title">
				<image src="@/static/blind/static.png"></image>
				<view>数据统计</view>
			</view>
			<view class="statics-total">
				<view class="statics-center">
					<view>{{userInfo.tokenRate}}</view>
					<view>成交额</view>
				</view>
				<view class="statics-center">
					<view>{{userInfo.tradeAmount}}</view>
					<view>成交单</view>
				</view>
			</view>
			<view class="statics-total">
				<view class="statics-center">
					<view>{{userInfo.todayDestroyAmount}}</view>
					<view>今日销毁</view>
				</view>
				<view class="statics-center">
					<view>{{userInfo.destroyAmount}}</view>
					<view>总计销毁</view>
				</view>
			</view>
		</view>
		<!-- <view class="statics1">
			<Echats style="width: 100%;height: 100%;" />
		</view> -->
		<!-- 操作按钮组 -->
		<view class="action-buttons">
			<view class="action-btn" @click="onout">
				<image src="@/static/blind/out.png"></image>
				<view>OTC出售</view>
			</view>
			<view class="action-btn" @click="onyun">
				<image src="@/static/blind/yunsl.png"></image>
				<view>云算力</view>
			</view>
			<view class="action-btn" @click="onbuy">
				<image src="@/static/blind/jiaoyi.png"></image>
				<view>购买</view>
			</view>
		</view>
		<view class="tabs">
			<!-- Tab切换 -->
			<view class="tab-container">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ active: activeTab === index }" @click="switchTab(index)">
					{{ tab }}
					<view v-if="activeTab === index" class="tab-line"></view>
				</view>
			</view>
			<view style="width: 100%;height: 52px;" />
			<view v-if="activeTab ===0">
				<view class="form" v-for="(item,idx) in toList" :key="idx">
					<view class="form-left">
						<!-- <view class="from-type">{{item.sellerName}}</view> -->
						<view class="from-time">数量:{{item.tokenAmount}}</view>
						<view class="from-time">价格:{{item.balanceAmount}}</view>
					</view>
					<view class="form-right">
						<view class="into-btn" @click="subout(item)" v-if="item.status===1">买入</view>
						<view class="out-btn">在售中</view>
					</view>
				</view>
			</view>
			<view v-else-if="activeTab ===1">
				<view class="form" v-for="(item,idx) in toList" :key="idx">
					<view class="form-left">
						<!-- <view class="from-type">{{item.sellerName}}</view> -->
						<view class="from-time">数量:{{item.tokenAmount}}</view>
						<view class="from-time">价格:{{item.balanceAmount}}</view>
					</view>
					<view class="form-right">
						<view class="into-btn" @click="subinto(item)" v-if="item.status===1">出售</view>
						<view class="out-btn">买入中</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="form" v-for="(item,idx) in Listdetail" :key="idx">
					<view class="form-left">
						<!-- <view class="from-type">{{item.sellerName}}</view> -->
						<view class="from-time1">数量：{{item.tokenAmount}}</view>
						<view class="from-time1">价格：{{item.balanceAmount}}</view>
						<view class="from-time1">状态：
							<text style="color: #dec59e;">{{onStatus(item.status)}}</text>
						</view>
					</view>
					<view class="form-right">
						<view class="into-btn1" @click="ondetail(item)">查看详情</view>
						<view class="into-btn1" v-if="onStatusControl(item) !== ''" @click="onsubcontrol(item)">{{onStatusControl(item)}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态提示 -->
		<view class="empty-state">
			<span>暂无更多记录哦~</span>
		</view>
		<view class='signTip acea-row row-center-wrapper' :class='active==true?"on":""'>
			<view class='signTipLight' v-if="activeTab ===0">
				<view class="sign-title">是否买入？</view>
				<view class="signbtn">
					<view @click="cancel">取消</view>
					<view @click="submitout">确认</view>
				</view>
			</view>
			<view class='signTipLight' v-else-if="activeTab ===1">
				<view class="sign-title">是否出售？</view>
				<view class="signbtn">
					<view @click="cancel">取消</view>
					<view @click="submitinto">确认</view>
				</view>
			</view>
			<view class='signTipLight' style="padding: 10px;" v-else>
				<view class="sign-title">{{title}}</view>
				<view style="height: 100px;" v-if="showVoucher">
					<image :src="voucher" class="nodata" @click.stop='uploadpic1' v-if="voucher">
					</image>
					<image src="/static/blind/tup.png" class="nodata" @click.stop='uploadpic1' v-else></image>
				</view>
				<view class="signbtn">
					<view @click="cancel">取消</view>
					<view @click="submitok1">确认</view>
				</view>
			</view>
		</view>
		<view class='mask' @touchmove.stop.prevent="false" :hidden='active==false'></view>
		<!-- <tui-drawer mode="bottom" :visible="assureDrawer" @close="closeAssure">
			<view class="ensure">
				<view @click="closeAssure" class="title1"><text class="iconfont icon-guanbi5"></text></view>
				<view class="en-title">出售剩余数量：<text>{{openvalue.tokenAmount}} TX</text></view>
				<input v-model="value" class="en-input" />
				<view class="en-btn" @click="onsubmit">确认出售</view>
			</view>
		</tui-drawer> -->
		<pageFooter></pageFooter>
	</div>
</template>

<script>
	import {
		gettradeList,
		gettokenList,
		getindexList,
		getmyList,
		subreceive,
		subcancel,
		submitpay,
		subconfirm
	} from '@/api/new.js';
  import {
    mapGetters
  } from "vuex";
	import Echats from "./compent/echarts.vue"
	import pageFooter from "@/components/pageFooter/index.vue";
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		components: {
			Echats,
			pageFooter
		},
		data() {
			return {
				activeTab: 0,
				// walletAddress: 'Ixwbce8dbebd45bb6a12',
				tabs: ['出售', '买入', '我的订单'],
				toList: [],
				userInfo: {},
				size: 20,
				page: 1,
				type: 1,
				active: false,
				Id: null,
				assureDrawer: false,
				openvalue: {},
				Listdetail: [],
				title: "",
        showVoucher: false,
				clickitem: {},
				statusBarHeight: statusBarHeight,
				voucher: ""
			}
		},
    computed: {
      ...mapGetters(['isLogin', 'uid'])
    },
		mounted() {
			this.getList()
			this.getUserInfo()
		},
		// watch() {

		// },
		methods: {
			getList: function() {
				this.loading = true
				const data = {
					limit: this.size,
					page: this.page,
					type: this.type
				}
				gettradeList(data).then((res) => {
					console.log("res", res)
					this.toList = res.data.list
					this.loading = false
				}).catch(err => {
					// console.log("err", err)
					this.$util.Tips({
						title: err
					});
					setTimeout(() => {
						if (err == '银行卡信息不存在') {
							uni.navigateTo({
								url: "/pages/bank/index"
							})
						}
					}, 2000)
					this.loading = false
				});
			},
			getUserInfo: function() {
				this.loading = true
				getindexList().then((res) => {
					this.userInfo = res.data
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			switchTab(index) {
				this.activeTab = index
				if (index === 0) {
					this.type = 1
					this.getList()
				} else if (index === 1) {
					this.type = 2
					this.getList()
				} else {
					this.getmyLists()
				}
			},
			getmyLists: function() {
				getmyList().then((res) => {
					console.log(res)
					this.Listdetail = res.data.list
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			copyAddress() {
				navigator.clipboard.writeText(this.walletAddress)
					.then(() => this.$message.success('复制成功'))
					.catch(() => this.$message.error('复制失败'));
			},
			onout: function() {
				uni.navigateTo({
					url: `/pages/blind/out?type=1`
				})
			},
			onyun: function() {
				uni.navigateTo({
					url: "/pages/recreation/index"
				})
			},
			onbuy: function() {
				uni.navigateTo({
					url: `/pages/blind/out?type=2`
				})
			},
			onStatus: function(type) {
				let data = ""
				if (type === -1) {
					data = "取消"
				} else if (type === 1) {
					data = "挂单"
				} else if (type === 2) {
					data = "待付款"
				} else if (type === 3) {
					data = "已支付"
				} else {
					data = "已确认"
				}
				return data
			},
			subout: function(value) {
				this.openvalue = value
				this.Id = value.id
				// this.assureDrawer = true
				this.active = true
			},
			subinto: function(value) {
				this.Id = value.id
				this.active = true
			},
			cancel: function() {
				this.active = false
			},
			submitout: function() {
				const data = {
					id: this.Id,
				}
				subreceive(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.loading = false
						this.active = false
						this.getList()
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			submitinto: function() {
				const data = {
					id: this.Id,
				}
				subreceive(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.loading = false
						this.active = false
						this.getList()
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			ondetail: function(item) {
				uni.navigateTo({
					url: `/pages/blind/detail?id=${item.id}`
				})
			},
			closeAssure() {
				this.assureDrawer = false;
			},
			onsubmit: function() {
				subreceive(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.loading = false
						this.active = true
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			onStatusControl: function(item) {
        let type = item.type;
        let status = item.status;
        let sellerId = item.sellerId;
        let buyerId = item.buyerId;
				let data = ""
				if (status === 1) {
          if((type ===1 && this.uid === sellerId)
                || (type ===2 && this.uid === buyerId)){
            data = "去撤销"
          }
				}else if(status === 2){
          if(this.uid === buyerId){
            data = "去支付"
          }
        }else if(status === 3){
          if(this.uid === sellerId){
            data = "去确认"
          }
        }else {
					data = "已取消"
				}
				return data
			},
			onsubcontrol: function(item) {
				this.clickitem = item
        this.showVoucher = false
				if (item.status === 1) {
					// 取消
					this.title = "是否撤销？"
					this.active = true
				}
				if (item.status === 2) {
					// 支付
					this.title = "是否支付？"
          this.showVoucher = true
					this.active = true
				}
				if (item.status === 3) {
					// 确认
					this.title = "是否确认？"
					this.active = true
				}
			},
			// 撤销
			subStatus: function() {
				const data = {
					id: this.clickitem.id
				}
				subcancel(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.getmyLists()
						this.loading = false
						this.active = false
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			// 支付
			subPay: function() {
				if (this.voucher === "") {
					this.$util.Tips({
						title: "请点击上次凭证"
					});
					return
				}
				const data = {
					id: this.clickitem.id,
					voucher: this.voucher
				}
				submitpay(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.getmyLists()
						this.loading = false
						this.active = false
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			// 取消
			subVerify: function() {
				const data = {
					id: this.clickitem.id
				}
				subconfirm(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.getmyLists()
						this.loading = false
						this.active = false
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			// 确定
			submitok1: function() {
				if (this.clickitem.status === 1) {
					// 取消
					this.subStatus()
				}
				if (this.clickitem.status === 2) {
					// 支付
					this.subPay()
				}
				if (this.clickitem.status === 3) {
					// 确认
					this.subVerify()
				}
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic1: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "maintain",
					pid: 0,
					count: 1
				}, function(res) {
					that.voucher = res;
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
	}


	.nodata {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10px;
		text-align: left;
		position: relative;
		top: 10px;
	}

	.signTipLight {
		padding: 10px;
	}

	.content {
		width: 100%;
		height: 160px;
		padding: 20px;
		padding-top: 30px;
		background-color: #e73224;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.body-tab {
		z-index: 999;
		width: 92%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		border: 1px solid lavender;
		position: relative;
		top: -20px;
	}

	/* 顶部资产行 */
	.asset-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;

		.asset-item {
			flex: 1;
			text-align: center;
			color: #fff;

			.label {
				display: block;
				font-size: 13px;
				margin-bottom: 5px;
			}

			.value {
				font-size: 18px;
				color: #f79b6d;
				font-weight: bold;
			}
		}
	}


	.statics {
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 10px;
		margin-top: -40px;
		padding: 10px;

		.statics-title {
			display: flex;

			image {
				width: 20px;
				height: 20px;
			}

			view {
				font-size: 16px;
				color: #333;
				margin-left: 5px;
			}
		}

		.statics-total {
			width: 100%;
			display: flex;
			padding: 10px;
			text-align: center;

			.statics-center {
				width: 50%;
				padding: 10px 0px 0px 0px;

				:nth-child(1) {
					color: #333;
					font-weight: 600;
					font-size: 17px;
				}

				:nth-child(2) {
					color: #b1b1b1;
					line-height: 26px;
					font-size: 15px;
				}
			}
		}
	}

	.statics1 {
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 10px;
		margin-top: 20px;
		height: 170px;
		padding: 10px;
	}

	.tabs {
		width: 90%;
		margin: 0 auto;
		height: 350px;
		overflow: auto;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #fff;
		margin-top: 20px;
	}

	.form {
		width: 100%;
		display: flex;
		padding: 10px 10px 10px 20px;
		height: 70px;
		border-bottom: 1px solid #f9f9f9;

		.form-left {
			width: 70%;

			.from-name {
				font-size: 13px;
				font-weight: 700;
				color: #704248;
			}

			.from-type {
				font-size: 14px;
				color: #333;
				font-weight: 700;
				line-height: 20px;
			}

			.from-time {
				font-size: 13px;
				font-weight: 500;
				line-height: 20px;
				color: #333;
			}

			.from-time1 {
				font-size: 12px;
				// font-weight: 500;
				line-height: 15px;
				color: #333;
			}
		}

		.form-right {
			width: 30%;
			font-size: 15px;
			text-align: right;
			position: relative;

			.into-btn {
				position: absolute;
				right: 10px;
				padding: 3px;
				width: 50px;
				font-size: 12px;
				height: 22px;
				line-height: 15px;
				text-align: center;
				background-color: #d2b380;
				border-radius: 10px;
				color: #333;
			}

			.into-btn1 {
				float: right;
				margin-top: 5px;
				position: relative;
				top: -3px;
				right: 10px;
				padding: 3px;
				width: 60px;
				font-size: 11px;
				height: 20px;
				line-height: 14px;
				text-align: center;
				background-color: #d2b380;
				border-radius: 5px;
				color: #333;
			}

			.out-btn {
				position: relative;
				top: 25px;
				right: 22px;
				line-height: 20px;
				color: #acacac;
				font-size: 12px;
			}
		}

		.form-line {
			width: 100%;
			height: 1px;
			transform: scale(0.1);
		}
	}

	/* Tab切换样式 */
	.tab-container {
		display: flex;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		width: 90%;
		position: absolute;
		z-index: 1;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 15px 0;
			position: relative;
			font-size: 14px;
			color: #666;

			&.active {
				color: #e73224;
				font-weight: bold;
			}

			.tab-line {
				position: absolute;
				bottom: 0;
				left: 33%;
				width: 40px;
				height: 2px;
				background: #e73224;
			}
		}
	}


	.price {
		font-size: 28rpx;
		color: #fbffff;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 2px;
		background: #e73224;
		/* 将白色改为红色 */
		border-radius: 3rpx;
	}

	.action-buttons {
		display: flex;
		gap: 20px;
		justify-content: center;
		margin: 20px 0;
	}

	.action-btn {
		text-align: center;
		width: 33%;

		image {
			width: 35px;
			height: 35px;
		}

		view {
			font-size: 14px;
		}
	}

	.signTip {
		width: 644rpx;
		// height: 285rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -322rpx;
		margin-top: -322.5rpx;
		border-radius: 10px;
		z-index: 99;
		text-align: center;
		transition: all 0.3s ease-in-out 0s;
		opacity: 0;
		transform: scale(0);
		background-color: #fff;

		.sign-title {
			width: 100%;
			font-size: 40rpx;
		}

		.signbtn {
			width: 100%;
			display: flex;
			padding-top: 28px;

			:nth-child(1) {
				width: 100%;
				width: 130px;
				background-color: #333;
				color: #fff;
				border-radius: 20px;
				text-align: center;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}

			:nth-child(2) {
				margin-left: 20px;
				width: 130px;
				background-color: #e73224;
				color: #fff;
				border-radius: 20px;
				text-align: center;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}
		}
	}

	.on {
		opacity: 1;
		transform: scale(1);
	}

	.ensure {
		width: 100%;
		height: 250px;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title1 {
			font-size: 32rpx;
			text-align: center;
			background-color: #fff;
			margin: 20rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}

		.en-title {
			padding: 20px 20px 10px 20px;
			font-size: 16px;
			color: #333;

			text {
				color: #FFDEAD;
			}
		}

		.en-input {
			width: 90%;
			margin-left: 20px;
			height: 76rpx;
			border: 2rpx solid #eee;
			border-radius: 5rpx;
			padding: 0 24rpx;
			font-size: 32rpx;
		}

		.en-btn {
			width: 80%;
			margin: 0 auto;
			height: 40px;
			margin-top: 25px;
			background-color: #333;
			border-radius: 20px;
			color: #fff;
			text-align: center;
			line-height: 40px;
		}

	}

	.mask {
		z-index: 9
	}

	.ensure.on {
		transform: translate3d(0, 0, 0);
	}

	.empty-state {
		text-align: center;
		color: #909399;
		padding: 20px;
		height: 120px;
	}
</style>
